<!-- 分销商信息  -->
<template>
  <!-- 用户资料 -->
  <view class="user-card ss-flex ss-col-bottom">
    <view class="card-top ss-flex ss-row-between">
      <view class="ss-flex">
        <view class="head-img-box">
          <image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
        </view>
        <view class="ss-flex-col">
          <view class="user-name">
            <text>{{ userInfo.nickname }}</text>
            <text class="vip"> VIP{{userInfo.level}} </text>
          </view>
          <view class="user-info-box ss-flex">
            <view>
              代理等级：<text>{{userInfo.level}}级代理</text>
            </view>
            <view>
              推荐人：<text>{{userInfo.parent_user || '平台直推'}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';

  const userInfo = computed(() => sheep.$store('user').userInfo);
  const agentInfo = computed(() => sheep.$store('user').agentInfo);
  const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/commission/background.png');

  const state = reactive({
    showMoney: false,
  });
</script>

<style lang="scss" scoped>
  // 用户资料卡片
  .user-card {
    height: 200rpx;
    margin: -88rpx 25rpx 0 25rpx;
    padding-top: 88rpx;
    padding-left: 20rpx;
    //background: v-bind(headerBg) no-repeat;
    //background-size: 100% 100%;

    .head-img-box {
      margin-right: 30rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      position: relative;
      background: #fce0ad;

      .head-img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .card-top {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 40rpx;
      .user-name {
        display: flex;
        align-items: center;
        font-size: 40rpx;
        color: #FFFFFF;
        font-weight: bold;
        line-height: 30rpx;
        margin-bottom: 20rpx;
        .vip {
          padding: 0 5rpx;
          background: linear-gradient(95deg, #FFD48E 0%, #FFF2E1 46%, #FFD48E 100%);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          border: 1rpx solid #D5CBB3;
          font-weight: 400;
          font-size: 20rpx;
          color: #351F07;
          margin-left: 15rpx;
        }
      }

      .log-btn {
        width: 84rpx;
        height: 42rpx;
        border: 2rpx solid rgba(#ffffff, 0.33);
        border-radius: 21rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 20rpx;
      }

      .look-btn {
        color: #fff;
        width: 40rpx;
        height: 40rpx;
      }
    }

    .user-info-box {
      justify-content: space-between;
      >view{
        display: flex;
        font-size: 26rpx;
        color: rgba(255,255,255,0.8);
        margin-right: 30rpx;
        >text{
          color: #fff;
        }
      }
    }
  }
</style>
